import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入 moment
import moment from 'moment'
// 引入 element-ui 包
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 引入 axios
import axios from 'axios'
// 引入 quill
import VueQuillEditor from 'vue-quill-editor'
// 引入 quill 的相关 css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(ElementUI)
Vue.use(VueQuillEditor)
Vue.config.productionTip = false

// 全局过滤器
Vue.filter('time', (value) => {
  return moment(value * 1000).format('YYYY-MM-DD hh:mm:ss')
})

// 优化 axios
// 在Vue原型上添加 一个 $axios 方法 等于 axios 这样 在别的组件中使用 axios 发送请求就不需要
// 每次都引入 axios
Vue.prototype.$axios = axios
// 配置 baseURL 基准地址  这样每次请求 就不需要 都发送  http://localhost:8888/api/private/v1/
axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/'

// 请求拦截:
//  在 axios 每次发送请求发送之前 都会进行 拦截  主要使用处理 每次发送请求之前 的事情
//  这里主要处理  每次请求 token 的发送
axios.interceptors.request.use(function (config) {
  // config 请求的数据信息
  config.headers.Authorization = localStorage.getItem('token')
  // console.log(config)
  return config
}, function (error) {
  console.log(error)
  // 失败提示信息
  return Promise.reject(error)
})

// 响应拦截
axios.interceptors.response.use(function (response) {
  // console.log(response)
  // resopnse 响应数据信息
  response = response.data
  // 校验结果, 如果响应时, 发现状态码是401, 说明是无效token, 拦截到登录
  if (response.meta.status === 401) {
    localStorage.removeItem('token')
    response.meta.msg = '登录状态已失效, 请重新登录'
    router.push('/login')
  }
  return response
}, function (error) {
  // 对响应错误做点什么
  console.log(error)
  return Promise.reject(error)
})

// 导航守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.path === '/login' || token) {
    next()
  } else {
    next('/login')
  }
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
